<template lang="html">
<div class="page">
  <cube-scroll ref="scroll" :options="{scrollbar:{fade:true}}">

    <div class="flex bg-white line-top p-md">
      <avatar :src="obj.Avatar" class="mr"></avatar>
      <div class="f-body">
        <div class="fs-sm tc-grey">{{obj.NickName}}</div>
        <div class="desc flex jc-sb">
          <p class="left">部门：财务部</p>
          <span>{{ obj.UpdateTime }}</span>
        </div>
      </div>
    </div>
    <tit has-bg class="mt-md">办理信息</tit>
    <div class="info-block">
      <p> {{ obj.Summary }} {{ obj.Summary }}</p>
      <p class="text-right tc-light fs-xs mt ">
        办理时间：{{ obj.UpdateTime }}
      </p>
      <hr>
      <h4 class="title mt">相关图片</h4>
      <el-row :gutter="10" >
        <el-col :span="6" v-for="(item,index) in List" :key="index+Math.random()" v-if="index<4">
          <g-item :thum-src="item.CoverImage" img-height="60" href="/"></g-item>
        </el-col>
      </el-row>
      <h4 class="title mt">相关视频</h4>
      <el-row :gutter="10" >
        <el-col :span="6" v-for="(item,index) in List" :key="index+Math.random()" v-if="index>4 && index<9">
          <g-item :thum-src="item.CoverImage" img-height="60" is-video href="/"></g-item>
        </el-col>
      </el-row>
    </div>
    <tit has-bg class="mt-md">办理信息</tit>
    <div class="info-block">
      <p> {{ obj.Summary }} {{ obj.Summary }}</p>
      <p class="text-right tc-light fs-xs mt ">
        办理时间：{{ obj.UpdateTime }}
      </p>
      <hr>
      <h4 class="title mt">相关图片</h4>
      <el-row :gutter="10" >
        <el-col :span="6" v-for="(item,index) in List" :key="index+Math.random()" v-if="index<4">
          <g-item :thum-src="item.CoverImage" img-height="60" href="/"></g-item>
        </el-col>
      </el-row>
      <h4 class="title mt">相关视频</h4>
      <el-row :gutter="10" >
        <el-col :span="6" v-for="(item,index) in List" :key="index+Math.random()" v-if="index>4 && index<9">
          <g-item :thum-src="item.CoverImage" img-height="60" is-video href="/"></g-item>
        </el-col>
      </el-row>
    </div>


  </cube-scroll>

</div>
</template>

<script>
export default {

  data() {
    return {
      List: [],
      obj:{},

    }
  },
  created () {
    this.getListData()
  },
  methods : {
    getListData() {
      this.id = this.$route.params.id
      this.axios.get('https://jason588.github.io/data.json').then((res) => {
        this.List = res.data.List
        this.obj = res.data.List[this.id]
      })
    },


  },
}
</script>

<style lang="stylus">
@import "assets/stylus/base"

</style>
